<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>					
					<el-form-item label="所属部门" prop="deptId">
						<el-tree-select size="large" v-model="queryParams.deptId" :data="deptOptions"
						 :props="{
						   value: 'deptId',
						   label: 'deptName',
						   children: 'children',
						 }"  
						check-strictly 
						placeholder="请选择" 
						value-key="deptId"
						style="width: 200px;"
						/>
					</el-form-item>
					<el-form-item label="人员选择" prop="userId">
						<el-select v-model="queryParams.userId" placeholder="请选择"  size="large" style="width: 200px">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item>
					<el-form-item label="日期选择" prop="yearMonth">
						<el-date-picker
							v-model="queryParams.yearMonth"
							value-format="YYYY-MM"
							placeholder="请选择日期"
							type="month"
							size="large"
						 />
					</el-form-item>
				</div>
				<el-form-item style="margin-right: 0">
					<div class="flex col-center row-end">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<div>
					<span class="fb fs16">员工提成列表</span>
				</div>
				<div>
					<el-button @click="dialogTableVisible = true">
						提成规则说明
					</el-button>
					<el-button type="defaultBtn" @click="handleExport" v-hasPermi="['performance:export']">
						导出
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }"
				  @selection-change="handleSelectionChange"
				  :summary-method="getSummaries" show-summary
				  >
				<!-- <el-table-column type="selection" width="55" align="center" />  -->
				<el-table-column label="姓名" align="center" prop="userName"/>
				<el-table-column label="所属部门" align="center" prop="deptName"/>
				<el-table-column label="时间" align="center" prop="yearMonth" />				
				<el-table-column label="成交订单" align="center" prop="orderAdd" />
				<el-table-column label="成交金额" align="center" prop="orderTotalAmount"/>
				<el-table-column label="回款金额" align="center" prop="orderReceivedAmount"/>
				<el-table-column label="订单预提成" align="center" prop="commissionLastAmount"/>
				<el-table-column label="奖金提成" align="center" prop="bonusCommissionLastAmount"/>
				<!-- <el-table-column label="提成合计" align="center" prop="commissionLastAmount"/> -->
			</el-table>
			<pagination v-show="total > 0" :total="total"  v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<!-- 提成规则说明 -->
		<el-dialog title="提成规则说明" center v-model="dialogTableVisible" append-to-body width="792px">
			<div>
				<el-row class="mt15">
					<el-col :span="4" class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						订单
					</el-col>
					<el-col :span="20" class="border-bottom border-right text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						订单提成比例
					</el-col>
					<el-col :span="4" class="border-bottom text-center border-left pt10 pb10" style="line-height: 38px;">
						无赠品
					</el-col>
					<el-col :span="20" class="border-bottom border-right text-center border-left pt10 pb10 pl10 pr10">
						根据产品的提成比例计算订单的提成金额<br>订单提成=产品1实际成交金额*产品提成比例+产品2实际成交金额*产品提成比例
					</el-col>
					<el-col :span="4" class="border-bottom text-center border-left pt10 pb10" style="line-height: 38px;">
						有赠品
					</el-col>
					<el-col :span="20" class="border-bottom border-right text-center border-left pt10 pb10 pl10 pr10" style="line-height: 38px;">
						根据订单的毛利率，确定订单的整体提成比例；订单提成=订单实际成交金额*订单提成比例
					</el-col>
				</el-row>
				<el-row class="mt25">
					<el-col :span="12" class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						月累计销售金额
					</el-col>
					<!-- <el-col :span="8" class="border-bottom  text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						提成类型
					</el-col> -->
					<el-col :span="12" class="border-bottom border-right text-center border-left border-top bg-F5F7FA fb pt10 pb10 color333">
						整体提成比例
					</el-col>
					<div class="flex col-center" style="width: 100%;"
					v-for="(item,index) in rules" :key="index"
					> 
						<el-col :span="12" class="border-bottom text-center border-left pt10 pb10">
							{{item.startValue}} ~ {{item.endValue}}万(不含)
						</el-col>
						<!-- <el-col :span="8" class="border-bottom text-center border-left pt10 pb10">
							回款金额
						</el-col> -->
						<el-col :span="12" class="border-bottom border-right text-center border-left pt10 pb10">
							{{item.ratioValue}}%
						</el-col>
					</div>
					<!-- <el-col :span="8" class="border-bottom text-center border-left pt10 pb10">
						10万-20万
					</el-col>
					<el-col :span="8" class="border-bottom text-center border-left pt10 pb10">
						回款金额
					</el-col>
					<el-col :span="8" class="border-bottom border-right text-center border-left pt10 pb10">
						2%
					</el-col>
					<el-col :span="8" class="border-bottom text-center border-left pt10 pb10">
						30万及以上
					</el-col>
					<el-col :span="8" class="border-bottom text-center border-left pt10 pb10">
						回款金额
					</el-col>
					<el-col :span="8" class="border-bottom border-right text-center border-left pt10 pb10">
						3%
					</el-col> -->
				</el-row>
				<div class="mt15 fs12 pb10">提成合计=订单提成金额之和+月累计销售金额*提成比例</div>
			</div>
		</el-dialog>		
	</div>
</template>

<script setup name="ProductSetup">
	import {
		userCommissionPage,//列表
	} from "@/api/business/performance";
	import {
		getUserListData//查业务经理
	} from "@/api/business/teamOpportunity";
	import {
	   listDept,//査部门
	} from "@/api/system/dept";
	import {
		listRules,
	} from "@/api/business/rules";
</script>
<script>
	export default {
		data() {
			return {
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				deptOptions:[],//部门
				teamOptions: [],//人员
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId:'',//用户id
					deptId:'',//部门id
					yearMonth:''
				}, //查询参数
				ids:[],
				multiple:true,
				dialogTableVisible:false,
				rules:[]
			}
		},
		created() {
			this.getList(1)
			
		},
		methods: {	
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				columns.forEach((column, index) => {
				  const values = data.map(item => Number(item[column.property]));
				  if (!values.every(value => isNaN(value)) && index > 3) {
					sums[index] = values.reduce((prev, curr) => {
					  const value = Number(curr);
					  if (!isNaN(value)) {
						return (prev*1 + curr*1).toFixed(2);
					  } else {
						return (prev*1).toFixed(2);
					  }
					}, 0);
					sums[index] += ' 元';
				  } 
				});
				return sums;
			},
			//查询列表
			getList(num) {
				this.loading = true;
				userCommissionPage(this.queryParams).then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
					if(num == 1){
						this.getUserList()
						this.getRules()
					}
				});
			},
			//获取规则
			getRules(){
				let data = {
					rulesCode: "royalties",
					rulesTypeCode: "royalties",
					pageNum: 1,
					pageSize: 10,
				}
				listRules(data).then((res) => {
					this.rules = res.rows[0].executionContent.performanceRatio
				})
			},
			
			// 获取业务经理
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
					this.getWorkList()
				});
			},
			// 获取部门
			getWorkList() {
				listDept().then((response) => {
				   this.deptOptions = this.handleTree(response.data, "deptId");
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			//新增
			handleAdd() {
				this.detail = ''
				this.ids = []
				this.selectUserIds = []
				this.$refs.dialogStatus.open()
				this.$forceUpdate()
			},
			// 排序
			handleRank(e){
				this.queryParams.orderKey = e
			},
			// 导出
			handleExport(){
				let that = this
				// this.queryParams.userId = this.ids.join(',')
				this.download(
				  "/performance/exportUserCommission",
				  {
				    ...this.queryParams,
				  },
				  `UserCommission_${new Date().getTime()}.xlsx`
				);
			},
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.multiple = !selection.length;
			},
		}
	}
</script>